<template>
	<div class="MyOrder">
		<h3>我的订单</h3>
		<div class="select">
			<el-select v-model="selectOrd.payStatus" placeholder="-请选择-">
				<el-option label="付款" value="-1"></el-option>
			  <el-option label="未付款" value="0"></el-option>
			  <el-option label="已付款" value="1"></el-option>
			</el-select>
			<el-select v-model="selectOrd.shipStatus" placeholder="-请选择-">
				<el-option label="发货" value="-1"></el-option>
				<el-option label="未发货" value="0"></el-option>
				<el-option label="已发货" value="1"></el-option>
				<el-option label="已收货" value="2"></el-option>
			</el-select>
			
			<el-select v-model="selectOrd.days" placeholder="-请选择-">
				<el-option label="7天以内" value="7"></el-option>
				<el-option label="15天以内" value="15"></el-option>
				<el-option label="30天以内" value="30"></el-option>
				<el-option label="60天以内" value="60"></el-option>
				<el-option label="120天以内" value="120"></el-option>
			</el-select>
			<el-button type="primary" @click="get()">查询</el-button>
			<template>
			  <el-table
			      :data="orders"
			      style="width: 95%;margin: 0 auto;"
				  border>
				  <el-table-column type="expand">
				  			  <template slot-scope='props'>
				  				<el-table
								:data="props.row.items"
									style="width: 60%; margin: 0 auto;"
									border>
									<el-table-column label="图片" >
									 <template slot-scope="scope">
											<el-image
											      style="width: 70px; height: 50px"
											      :src="`${$ip}/api/public/showimg/${scope.row.book.pic}`">
											</el-image>
									  </template>
									</el-table-column>
									<el-table-column
									  prop="book.name"
									  label="名称"
									  >
									</el-table-column>
									<el-table-column
									  prop="num"
									  label="数量"
									  >
									</el-table-column>
									<el-table-column
									  prop="price"
									  label="单价"
									 >
									</el-table-column>
								</el-table>
				  			  </template>
				  </el-table-column>
			      <el-table-column
			        prop="ordid"
			        label="订单号"
			        >
			      </el-table-column>
			      <el-table-column
			        prop="ship2addr"
			        label="收货地址"
			       width="300">
			      </el-table-column>
			      <el-table-column
			        prop="ship2phone"
			        label="电话"
					>
			      </el-table-column>
				 <el-table-column
				   prop="shipno"
				   label="发货单号"
				    >
				 </el-table-column>
				 <el-table-column
				   prop="tcreate"
				   label="下单时间"
				   >
				 </el-table-column>
				 <el-table-column
				   prop="amount"
				   label="总价"
				    >
				 </el-table-column>
				 <el-table-column
				   prop="payStatus"
				   label="付款"
				   >
				   <template slot-scope="scope">
				   	<el-button type="danger"  v-show="scope.row.payStatus ==0" @click="payst(scope.row.ordid)">未付款</el-button>
				   	<el-button type="primary" v-show="scope.row.payStatus ==1">已付款</el-button>								
				    </template>
				 </el-table-column>
				 <el-table-column
				   prop="shipStatus"
				   label="收货"
				    >
					<template slot-scope="scope">
						<el-button type="danger"  v-show="scope.row.shipStatus ==0">未发货</el-button>
						<el-button type="primary" v-show="scope.row.shipStatus ==1">已发货</el-button>
						<el-button type="success" v-show="scope.row.shipStatus ==2">已收货</el-button>								
					 </template>
				 </el-table-column>
			    </el-table>
			</template>
			<div class="more" @click="more()"><button>显示更多</button></div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'MyOrder',
		data() {
			return{
				selectOrd:{
					payStatus:"-1",
					shipStatus:'-1',
					days:'7',
				},
				orders:[],
				lines:5,
				num:1,
				total:0,
			}
		},
		methods:{
			payst(id){
				console.log(id);
				this.$router.push({
					path:'/pc/pay',
					query:{id:id},
				})
			},
			more(){
				if(this.total-(this.lines*this.num) <= 0){
					this.$message({
						message:'没有更多',
						type:"error",
					});
					return;	
				}
				this.num += 1;
				console.log(this.num);
				this.get()
			},
			get(){
				this.orders = [];
				console.log(this.selectOrd);
				let obj = {};
				if(this.selectOrd.payStatus != "-1"){
					
					obj.payStaus=parseInt(this.selectOrd.payStatus);
					
				}
				if(this.selectOrd.shipStatus != "-1"){
					obj.shipStatus=parseInt(this.selectOrd.shipStatus);
					
				}
					obj.days=parseInt(this.selectOrd.days);
				console.log(obj);
				this.$postkv('/api/fore/ord/findPageOrders/'+this.num+'/'+this.lines,obj)
				.then((resp)=>{
				    resp.data.data.orders.forEach((item)=>{
						item.tcreate = this.find(item.tcreate);
					})
					this.orders = resp.data.data.orders;
					this.total = resp.data.data.total;
					console.log(this.orders);
				})
			}
		},
		computed:{
			find(){
				return(val) =>{
					let year = new Date(val).getFullYear();
					let m = new Date(val).getMonth();
					let day = new Date(val).getDate();
					return `${year}-${m}-${day}`
				}
			},
			day(){
				return(val)=>{
					switch(val){
						case '7天以内':
						return 7;
						break;
						case '15天以内':
						return 15;
						break;
						case '30天以内':
						return 30;
						break;
						case '60天以内':
						return 60;
						break;
						case '120天以内':
						return 120;
						break;
					}
				}
			},
			pay(){
				return(val)=>{
					switch(val){
						case '未付款':
						return 0;
						break;
						case '已付款':
						return 1;
						break;
					}
				}
			},
			ship(){
				return(val)=>{
					switch(val){
						case '未发货':
						return 0;
						break;
						case '已发货':
						return 1;
						break;
						case '已收货':
						return 2;
						break;
					}
				}
			}
		},
	mounted() {
		this.get();
	}
	}
</script>

<style scoped>
	.MyOrder{
		width: 85%;
		margin: 50px auto;
		text-align: center;
	}
	.more button{
		height: 30px;
		width: 200px;
		background-color: #409eff;
		border: none;
		outline: none;
		color: white;
		border-radius: 5px;
	}
</style>